<template>
  <div class="person">
    <h2>姓名:{{ name1 }}</h2>
    <h2>年龄:{{ age }}</h2>
    <h2>年龄nl:{{ nl }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive, ref, toRefs, toRef } from 'vue';

let person = reactive({
  name: "张三",
  age: 10,
})

// 从一个响应式对象身上结构出东西不是响应式的
let { name, age } = toRefs(person);

let pser = ref({
  name1: "张三",
  age2: 10,
})

let { name1 } = toRefs(pser.value);
let nl = toRef(person,'age')


function changeName() {
  name.value += '~'
  name1.value += '~';
  nl.value+=2
}

function changeAge() {
  age.value += 1
}

</script>

<style>
.person {
  width: 100%;
  background-color: skyblue;
}
</style>